<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.css" />
	</head>
	<style type="text/css">
		.mui-content {
			background: #FFFFFF;
		}

		.active {
			border: 1px solid #FF5053 !important;
			color: #FF5053;
			background-size: 1.25rem;
		}

		.mui-bar-tab .mui-tab-item {
			color: #333333;
		}

		.mui-bar-tab .mui-tab-item:first-child {
			border-right: 1px solid #F2F2F2;
		}

		.mui-bar-tab .mui-tab-item:last-child {
			background: #FF5053;
			color: #FFFFFF;
		}
		.mui-popup-inner{
			padding-bottom: 0;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav i_nav">
			<div class="i_nav_user mui-pull-left">
				<img src="images/user.jpg" alt="">
				<span>七爷</span>
			</div>
		</header>
		<div class="mui-content">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="images/pic_01.jpg"></div>
					<div class="swiper-slide"><img src="images/pic_01.jpg"></div>
					<div class="swiper-slide"><img src="images/pic_01.jpg"></div>
					<div class="swiper-slide"><img src="images/pic_01.jpg"></div>
					<div class="swiper-slide"><img src="images/pic_01.jpg"></div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
			<div class="mui-row datails_goodsinfo">
				<div class="mui-col-xs-12">
					<p class="datails_goodsinfo_title">可堂食，可自提，三环内免费配送 高颜值高品质寿司来袭！99元享原价385元兄弟船日本料理小寨店寿司套餐~军舰类、手握类</p>
					<p><span class="datails_goodsinfo_price">￥99</span> 门市价￥385</p>
					<p><span>已售：307</span> <span class="mui-pull-right">库存：981</span></p>
				</div>
			</div>
			<div class="mui-row datails_businessinfo">
				<div class="mui-col-xs-12 ">
					<h5>商家信息</h5>
				</div>
				<div class="mui-col-xs-12">
					<div class="mui-row datails_address">
						<div class="mui-col-xs-1">
							<img src="images/ico_01.png" alt="" style="width: 1.5625rem;height: 1.5625rem;">
						</div>
						<div class="mui-col-xs-10">
							<p>兄弟船日本料理（小寨店）</p>
							<p>西安市雁塔区长安中路86号开米广场南侧兄弟船日本料理小寨店（地铁小寨站A出口一百米）</p>
						</div>
						<div class="mui-col-xs-1">
							<a href="tel:15902931513">
								<img src="images/ico_04.png" alt="" style="width: 1.5625rem;height: 1.5625rem;">
							</a>
						</div>
					</div>
					</a>
				</div>
			</div>
			<div class="mui-row datails_businessinfo">
				<div class="mui-col-xs-12">
					<h5>规格信息</h5>
				</div>
				<div class="mui-col-xs-12 datails_sku">
					<button type="button" class="active">套餐</button>
					<button type="button">香辣虾餐</button>
					<button type="button">香辣虾套餐</button>
					<button type="button">香辣虾套餐</button>
					<button type="button">香辣虾套餐</button>
					<button type="button">香辣虾套餐</button>
					<button type="button">香辣虾套餐</button>
				</div>
			</div>
			<div class="mui-row datails_businessinfo">
				<div class="mui-col-xs-12">
					<h5>详细信息</h5>
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-12">
					<img src="images/pic_03.jpg">
					<img src="images/pic_02.gif">
				</div>
			</div>
			<div class="share">
				<img src="images/ico_17.png" onclick="exit()">
				<div class="share_group">
					<span class="share_title">会员分享</span>
					<span class="share_moery">返￥9</span>
					<span class="share_desc">下单即得佣金</span>
					<button class="share_btn" onclick="disablemask()">立即分享</button>
				</div>
			</div>
		</div>
		<div class="mask" style="display: none;">
			<div>
				<img src="images/ico_26.png" style="width: 6.25rem;float: right;">
				<p style="float: right;color: #FFFFFF;margin-top: 5rem;margin-right: -4.375rem">请点击右上角"..."进行分享</p>
			</div>
			<div class="mask_box">
				<a href="poster.html">
					<p><img src="images/ico_20.png" style="width: 1.875rem;height: 1.875rem;border-radius: 1.875rem;">
						&nbsp;&nbsp;产品宣传海报</p>
				</a>
				<a href="poster1.html">
					<p><img src="images/ico_21.png" style="width: 1.875rem;height: 1.875rem;border-radius: 1.875rem;">&nbsp;&nbsp;九宫格文案海报</p>
				</a>
				<p style="background: #CCCCCC;text-align: center;justify-content: center;"  onclick="cancel()">取消</p>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="index.html">
				<span class="mui-tab-label">商城首页</span>
			</a>
			<span class="mui-tab-item" onclick="im()">
				咨询客服
			</span>
			
			<a class="mui-tab-item" href="send_order.html">
				<span class="mui-tab-label">立即购买</span>
			</a>
		</nav>
		<script src="js/mui.js"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			mui('body').on('tap','a',function(){
			          window.top.location.href=this.href;
			   });
			var swiper = new Swiper('.swiper-container', {
				autoplay: true, //可选选项，自动滑动
				effect: 'coverflow',
				slidesPerView: 1.2,
				centeredSlides: true,
				loop: true,
				speed: 1000,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
			});
			$('.datails_sku button').click(function() {
				$('.datails_sku button').removeClass('active')
				$(this).addClass('active')
			})

			function exit() {
				$('.share').hide(500)
			}
			function disablemask(){
				$('.mask').css('display','block')
			}
			function cancel(){
				$('.mask').css('display','none')
			}
			function im(){
				mui.alert("<p style='color:#333;font-size:15px;text-align:left;line-height:40px;border-top:1px solid #e9e9e9;margin:0'><a href='#'>在线客服<img src='images/ico_22.png' style='width:20px;height:20px;margin-top:10px;float:right'/></a></p><p style='color:#333;font-size:15px;text-align:left;line-height:40px;border-top:1px solid #e9e9e9;margin:0'><a href='tel:15902931513'>15902931513<img src='images/ico_04.png' style='width:20px;height:20px;margin-top:10px;float:right'/></a></p><p style='color:#333;font-size:15px;text-align:left;line-height:40px;border-top:1px solid #e9e9e9;margin:0'><a href='tel:15902931513'>15902931513<img src='images/ico_04.png' style='width:20px;height:20px;margin-top:10px;float:right'/></a></p><p style='color:#333;font-size:15px;text-align:left;line-height:40px;border-top:1px solid #e9e9e9;margin:0'><a href='tel:15902931513'>15902931513<img src='images/ico_04.png' style='width:20px;height:20px;margin-top:10px;float:right'/></a></p>","联系客服")
			}
		</script>
	</body>

</html>
